var React = require('react');

var Menu = require('antd/lib/menu');
//var MenuCss = require('antd/lib/menu/style/index.css');

var Breadcrumb = require('antd/lib/breadcrumb');
//var BreadcrumbCss = require('antd/lib/breadcrumb/style/index.css');
var Icon = require('antd/lib/icon');
var Link = require( "react-router" ).Link;

var SubMenu = Menu.SubMenu;



var Home = React.createClass({
    componentWillUnmount:function(){
      
      //alert(11);
    },
    render:function(){

        return(
           <div>
            <div className="ant_layout_aside">
              <aside className="ant_layout_sider">
                <div className="ant_layout_logo"></div>
                <Menu mode="inline" theme="dark"
                  defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
                  <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
                    <Menu.Item key="1">
                      <Link to="/">主页</Link>
                    </Menu.Item>
                    <Menu.Item key="2">
                      <Link to="/test">测试1</Link>
                    </Menu.Item>
                    <Menu.Item key="3">
                      <Link to="/test1">测试2</Link>
                    </Menu.Item>
                    <Menu.Item key="4">
                      <Link to="/asasd">测试3</Link>
                    </Menu.Item>
                  </SubMenu>
                  <SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
                    <Menu.Item key="5">选项5</Menu.Item>
                    <Menu.Item key="6">选项6</Menu.Item>
                    <Menu.Item key="7">选项7</Menu.Item>
                    <Menu.Item key="8">选项8</Menu.Item>
                  </SubMenu>
                  <SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
                    <Menu.Item key="9">选项9</Menu.Item>
                    <Menu.Item key="10">选项10</Menu.Item>
                    <Menu.Item key="11">选项11</Menu.Item>
                    <Menu.Item key="12">选项12</Menu.Item>
                  </SubMenu>
                </Menu>
              </aside>
              <div className="ant_layout_main">
                <div className="ant_layout_header"></div>
                <div className="ant_layout_breadcrumb">
                  <Breadcrumb>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>应用列表</Breadcrumb.Item>
                    <Breadcrumb.Item>某应用</Breadcrumb.Item>
                  </Breadcrumb>
                </div>
                <div className="ant_layout_container">
                  <div className="ant_layout_content">
                    <div style={{ height: 590 }}>
                      { this.props.children }
                    </div>
                  </div>
                </div>
                <div className="ant_layout_footer">
                Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
                </div>
              </div>
            </div>
          </div>
        )
    }
});

module.exports = Home;